<template>
  <div style="margin-top: 5px">
    <el-tabs type="border-card" v-model="activeName" @tab-remove="removeTab">
      <el-tab-pane label="报告模板列表" name="list">
        <el-row :guter="15">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-col :span="12">
              <el-form-item label="模板名称" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入模板名称"
                  :maxlength="11"
                  show-word-limit
                  clearable
                  prefix-icon="el-icon-mobile"
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="available">
                <el-switch v-model="formData.available"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item size="large">
                <el-button type="primary" icon="el-icon-search" @click="submitForm">查询</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="check({name:'新增模板'})">新增</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <el-table
          :data="dataList"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          v-show="dataList.length > 0"
        >
          <el-table-column label="模板名称" prop="name" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="id" align="center">
            <template slot-scope="{ row }">
              <el-button type="primary" @click="check(row,0)">
                <span>查看</span>
              </el-button>
              <el-button
                type="primary"
                @click="check(row,1)"
                v-if="hasPermission('clinic:report:edit')"
              >
                <span>编辑</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :total="formData.totalCount"
          :page.sync="formData.page"
          :limit.sync="formData.pageSize"
          @pagination="submitForm"
        />
      </el-tab-pane>
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="index"
        :label="item.title"
        :name="item.title"
        closable
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="20">
                <el-form
                  :ref="'recordForm_'+ item.name"
                  :model="item"
                  :rules="recordRules"
                  size="medium"
                  label-width="100px"
                >
                  <el-form-item label="模板名称" prop="name">
                    <el-input
                      v-model="item.name"
                      placeholder="请输入模板名称"
                      clearable
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="4">
                <el-button style="float: right;" type="text" @click="saveTemplate(item)">保存模板</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="text item">
            <Template :item="item"></Template>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getReportList, editReportTempl } from "@/api/report";

import Pagination from "@/components/Pagination";

import Template from "./template";

export default {
  components: { Pagination, Template },
  name: "report",
  props: [],
  data() {
    return {
      editableTabs: [],
      activeName: "list",
      dataList: [],
      formData: {
        name: "",
        available: false,
        page: 0,
        totalCount: 0,
        totalPage: 1,
        pageSize: 20
      },
      rules: {
        name: []
      },
      recordRules: {
        name: [
          {
            required: true,
            message: "请输入模板名称",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {
    activeName() {
      if (this.activeName === "list") {
        this.search();
      }
    }
  },
  created() {
    window.app = this;
    this.search();
  },
  mounted() {},
  methods: {
    saveTemplate(item) {
      this.$refs["recordForm_" + item.name][0].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        console.log(item);
        editReportTempl({
          version: item.version,
          id: item.id,
          name: item.name,
          context: item.content
        }).then(response => {
          console.log(response)
          if(response.code === 200){
            item.version = item.version + 1;
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success",
            });
          }
        });
      });
    },
    removeTab(targetName) {
      this.editableTabs = this.editableTabs.filter(function(item) {
        return item.title !== targetName;
      });
      console.log(targetName);
      console.log(this.editableTabs);
      this.activeName = "list";
    },
    check(template, status) {
      template.status = status;
      template.title = template.name;
      let result = true;
      this.editableTabs.forEach(function(item) {
        if (item.title === template.title) {
          result = false;
        }
      });
      if (result) {
        this.editableTabs.push(template);
      }
      this.activeName = template.title;
    },
    search() {
      getReportList(this.formData).then(response => {
        if (response.code === 200) {
          this.dataList = response.page.records;
          this.formData.page = response.page.current;
          this.formData.totalPage = response.page.pages;
          this.formData.totalCount = response.page.total;
        }
      });
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        this.search();
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    }
  }
};
</script>
<style>
</style>

